import { useEffect, useState } from "react"
import { useNavigate, } from 'react-router-dom'
import axios from 'axios'

export interface ListItem {
	'title': string,
	'desc': string,
	'price': number,
	'url': string,
	'id': string
}

const App = () => {
	const [list, setList] = useState<ListItem[]>([])
	const navigate = useNavigate()
	useEffect(() => {
		axios.get('/api/list').then(resp => {
			console.log(resp.data);
			setList(resp.data.data)
		})
	}, [])

	return (
		<>
			<div className="list">
				{
					list.length > 0 && list.map((v, i) => {
						return (
							<dl key={v.id} onClick={() => navigate('/detail/' + v.id)}>
								<dt>
									<img src={v.url} alt="" />
								</dt>
								<dd>
									<h3>{v.title}</h3>
									<p>{v.desc}</p>
								</dd>
							</dl>
						)
					})
				}
			</div>
		</>
	)
}

export default App